<!--
 * @Author: Lin Hongwei
 * @Date: 2021-12-12 20:21:29
 * @LastEditTime: 2021-12-14 20:19:59
 * @LastEditors: Lin Hongwei
 * @email: 1365755396@qq.com
 * @CSDN: https://blog.csdn.net/weixin_45429409
 * @Description: 菜单组件
-->
<template>
  <div class="menubar">
    <transition name="menu-up">
      <div
        class="menu menu-bottom"
        :class="{ 'hide-shadow': showSetting }"
        v-show="showMenu"
      >
        <div class="menu-item">
          <span
            class="menu-item-item iconfont icon-mulu"
            @click="handleShowSetting(0)"
          />
        </div>
        <div class="menu-item">
          <span
            class="menu-item-item iconfont icon-progress"
            @click="handleShowSetting(1)"
          />
        </div>
        <div class="menu-item">
          <span
            class="menu-item-item iconfont icon-taiyang"
            @click="handleShowSetting(2)"
          />
        </div>
        <div class="menu-item">
          <span class="menu-item-item" @click="handleShowSetting(3)">A</span>
        </div>
      </div>
    </transition>
    <transition name="menu-up">
      <div class="menu menu-bottom menu-setting" v-show="showSetting">
        <div class="setting-progress" v-show="showTag == 1">
          <div class="progress-wrapper">
            <input
              type="range"
              class="progress"
              max="100"
              min="0"
              step="1"
              @change="onPregressChange($event.target.value)"
              @input="onProgressInput($event.target.value)"
              :value="progress"
              :disabled="!bookAvailable"
              ref="progress"
            />
          </div>
          <div class="text-wrapper">
            <span>{{ bookAvailable ? progress + "%" : "加载中..." }}</span>
          </div>
        </div>
        <div class="setting-themes" v-show="showTag == 2">
          <div
            class="themes-wrapper"
            v-for="(item, index) in themeList"
            :key="index"
            @click="handleSetTheme(index)"
          >
            <div class="themes-bg" :style="{'background':item.style.body.background}"> </div>
            <div class="themes-txt" :style="{'color':index==defaultThemeIndex?'#000':'#ddd'}">{{ item.label }}</div>
          </div>
        </div>
        <div class="setting-font-size" v-show="showTag == 3">
          <div
            class="pre-text"
            :style="{ fontSize: fontSizeList[0].fontSize + 'px' }"
          >
            A
          </div>
          <div class="font-wrapper">
            <div
              class="font-list"
              v-for="(item, index) in fontSizeList"
              :key="index"
              @click="setFontSize(item.fontSize)"
            >
              <div class="line"></div>
              <div class="point-wrapper">
                <div class="point" v-show="defaultFontSize == item.fontSize">
                  <div class="smail-point"></div>
                </div>
              </div>
              <div class="line"></div>
            </div>
          </div>
          <div
            class="pre-text"
            :style="{
              fontSize: fontSizeList[fontSizeList.length - 1].fontSize + 'px',
            }"
          >
            A
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "MenuBar",
  props: {
    showMenu: {
      type: Boolean,
      default: false,
    },
    fontSizeList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    defaultFontSize: {
      type: Number,
      default: 12,
    },
    bookAvailable: {
      //是否可以选择进度
      type: Boolean,
      default: false,
    },
    themeList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    defaultThemeIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      showSetting: false,
      showTag: 0,
      progress: 0,
    };
  },
  methods: {
    /**
     * @description: 显示设置菜单
     * @param {*} type
     * @return {*}
     */
    handleShowSetting(type) {
      this.showTag = type;
      this.showSetting = this.showSetting ? !!type : !this.showSetting&&!!type;
      this.$emit("handleShowSetting", type);
    },
    /**
     * @description: 设置字体大小
     * @param {*}
     * @return {*}
     */
    setFontSize(fontSize) {
      this.$emit("setFontSize", fontSize);
    },
    onPregressChange(value) {
      this.$emit("onPregressChange", value);
    },
    onProgressInput(value) {
      this.progress = value;
      this.$refs.progress.style.backgroundSize = `${this.progress}% 100%`;
    },
    handleSetTheme(index){
      this.$emit('handleSetTheme',index);
    }
  },
  watch: {
    /**
     * @description: 监听菜单栏的隐藏来隐藏已经显示的设置菜单
     * @param {*} old
     * @param {*} val
     * @return {*}
     */
    showMenu(old, val) {
      //都隐藏
      this.showSetting = true;
      this.handleShowSetting(false);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/style/menu.scss";
.hide-shadow {
  box-shadow: none;
}

.menu-setting {
  .setting-font-size {
    @include layout-full;
    height: 50%;
    display: flex;
    justify-content: space-between;
    align-content: center;
    .pre-text {
      flex: 0 0 px2rem(100);
      //   @include center;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      &:first-child {
        justify-content: flex-end;
      }
    }
    .font-wrapper {
      flex: 1;
      @include center;
      .font-list {
        flex: 1;
        @include center;
        .line {
          flex: 1;
          height: 0;
          border-top: px2rem(5) solid #ddd;
        }
        .point-wrapper {
          position: relative;
          width: 0;
          height: px2rem(20);
          border-left: px2rem(5) solid #ddd;
          .point {
            position: absolute;
            top: 50%;
            left: 50%;
            height: px2rem(50);
            width: px2rem(50);
            border-radius: 50%;
            background: #fff;
            border: px2rem(1) solid #ccc;
            box-shadow: 0 px2rem(4) px2rem(4) rgba(0, 0, 0, 0.15);
            transform: translate(-50%, -50%);
            @include center;
            .smail-point {
              width: px2rem(10);
              height: px2rem(10);
              background: #000;
              border-radius: 50%;
            }
          }
        }
        &:first-child {
          .line:first-child {
            border-top: 0;
          }
        }
        &:last-child {
          .line:last-child {
            border-top: 0;
          }
        }
      }
    }
  }
}

//进度条
.setting-progress {
  position: absolute;
  top: 0;
  height: 40%;
  width: 100%;
  .progress-wrapper {
    width: 100%;
    height: 100%;
    padding: 0 px2rem(30);
    @include center;
    box-sizing: border-box;
    .progress {
      width: 100%;
      -webkit-appearance: none;
      height: px2rem(5);
      background: -webkit-linear-gradient(#333, #333) no-repeat, #ddd;
      background-size: 0 100%;
      &:focus {
        outline: none;
      }
      &::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: px2rem(25);
        width: px2rem(25);
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
        border: px2rem(1) solid #ddd;
      }
    }
  }
  .text-wrapper {
    font-size: px2rem(30);
    color: #333;
    margin-top: px2rem(-14);
    @include center;
  }
}

//主题
.setting-themes {
  @include layout-full;
  height: 50%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .themes-wrapper {
    flex: 1;
    .themes-bg {
      margin:  px2rem(20);
      height: px2rem(50);
      border-radius: 10px;
      border: 1px solid #ddd;
    }
    .themes-txt {
      text-align: center;
      font-size: px2rem(24);
    }
  }
}
</style>